<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试jquery获取盒子模型参数</title>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <style>
        .wrap {
            display: inline-block;
            width: 100px;
            height: 100px;
            padding: 100px;
            border: 5px solid #f40;
            margin: 150px;
            background-color: #f90;
        }

        .box {
            width: 300px;
            height: 300px;

            background-color: #0a58ca;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .back-top {
            font-size: 40px;
            line-height: 40px;
            padding: 10px;
            width: 80px;
            height: 80px;
            white-space: pre-wrap;
            position: fixed;
            right: 20px;
            bottom: 100px;
            background-color: pink;
            display: none;
        }

        .floor {
            width: 1000px;
            height: 500px;
            margin-top: 50px;

        }

        .一楼 {
            background-color: red;
        }

        .二楼 {
            background-color: yellowgreen;
        }

        .三楼 {
            background-color: blue;
        }

        .nav {
            position: fixed;
            right: 20px;
            bottom: 50%;
            color: beige;
            list-style: none;
        }

        .nav li {
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="wrap">

</div>
<div class="box"></div>
<div class="floor_parent">
    <div class="一楼 floor"></div>
    <div class="二楼 floor"></div>
    <div class="三楼 floor"></div>
</div>
<div class="back-top">返回顶部</div>
<ul class="nav">
    <li class="f1 一楼">去(1)楼</li>
    <li class="f2 二楼">去(2)楼</li>
    <li class="f3 三楼">去(3)楼</li>
</ul>
<script src="./js/testBoxModel.js">

</script>
</body>
</html>